iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

每天一份前端小作品系列 第 4

【Day4】用HTML&CSS做職棒戰績表

  • 分享至 

  • xImage
  •  

本日小作品:
https://codepen.io/linchinhsuan/pen/QWNBVMm

練習重點摘要:

tr:nth-child(even)
針對表格的偶數行,為其背景做上色,最終達到雙色一目了然的效果。:nth-child()選取器可以選取特定物件,例如常見的有odd和even兩個,意思就是選取奇/偶數子物件。

line-height
在more這個<a>中為了讓文字置中,可以讓line-height等於物件的高,這樣就會達到置中的效果,是很常見的手法。

<form action="#">
表格的標籤,action屬性的值代表這個表格資料送出要送到哪裡去。

<input type="radio" name="teamFan" id="teamL">
type="radio"是單選,只要後面的name的值一樣就會被當作同一組,一組只能單選一個答案。

<label for="teamL">統一</label>
如果不使用<label>那當我們點擊「統一」這個文字的時候就不會有任何反應。為了擴大點擊範圍,可以使用<label>,後面的for的值是你想擴大點擊範圍的input的id。

placeholder
這個值可以顯示在輸入框中,並且在輸入之後就消失,用以提示使用者達到更好的使用者體驗。

---

本日結語:
今天是第四天,主要是練習表格和表單的內容,若有誤之處懇請各路高手賜教!


上一篇
【Day3】用HTML&CSS讓商品突出
下一篇
【Day5】用HTML&CSS做漸層色
系列文
每天一份前端小作品30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言